<template>
  <div>
    <!-- 标题+搜索栏 -->
    <el-row>
      <el-col :span="4">
        <div id="suggestTitle">
          <i class="el-icon-edit-outline"></i>
          <b>投诉与建议</b>
        </div>
      </el-col>
      <el-col :span="12">
        <el-col :span="20">
          <!-- 回复内容 -->
          <el-input v-model="replyContent"
                    size="small"
                    placeholder="批量回复内容">
          </el-input>
        </el-col>
        <el-col :span="4">
          <!-- 批量回复 -->
          <el-button type="warning"
                     size="small"
                     @click="replyBatch(handleSelectionChange,replyContent)">批量回复
          </el-button>
        </el-col>
      </el-col>
      <!-- 搜索投诉内容 -->
      <el-col :span="8">
        <el-input v-model="inputName"
                  size="small"
                  placeholder="搜索投诉内容"
                  @keyup.enter.native="search(inputName)">
        </el-input>
      </el-col>
    </el-row>

    <!-- 表格主体 -->
    <el-table :data="tableData"
              @selection-change="handleSelectionChange">
      <el-table-column type="selection"
                       :selectable="canSelect"></el-table-column>
      <el-table-column label="投诉用户"
                       prop="user.account"
                       align="center"></el-table-column>
      <el-table-column label="被投诉小区"
                       prop="community.name"
                       align="center"></el-table-column>
      <el-table-column label="投诉内容"
                       prop="content"
                       align="center"
                       width="150"
                       :show-overflow-tooltip='true'></el-table-column>
      <el-table-column label="投诉时间"
                       prop="suggestTime"
                       align="center"
                       width="175"
                       :show-overflow-tooltip='true'></el-table-column>
      <el-table-column label="回复内容"
                       prop="reply"
                       align="center"
                       width="150"
                       :show-overflow-tooltip='true'></el-table-column>
      <el-table-column label="回复时间"
                       prop="replyTime"
                       align="center"
                       width="175"
                       :show-overflow-tooltip='true'></el-table-column>
      <el-table-column label="是否处理"
                       prop="result"
                       align="center"></el-table-column>
      <el-table-column label="操作"
                       align="center"
                       width="200">
        <template slot-scope="td">
          <!-- 查看 td.row当前这一行的对象 -->
          <el-button type="success"
                     size="mini"
                     @click="show(td.row)">查看</el-button>
          <!-- 修改 -->
          <el-button type="warning"
                     size="mini"
                     @click="update(td.row)"
                     v-if="td.row.result==='未处理'">回复</el-button>
          <!-- 删除 -->
          <el-button type="danger"
                     size="mini"
                     @click="del(td.$index,td.row)"
                     v-if="td.row.result==='已处理'">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="currentPage"
                   :page-sizes="[5, 10, 15]"
                   :page-size="size"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="total">
    </el-pagination>

    <!-- 查看：对话框 -->
    <el-dialog title="查看详情"
               :visible.sync="dialogVisible"
               width="60%">
      <!-- 使用子组件 -->
      <suggestdetail :suggest="currentSuggest"></suggestdetail>
      <span slot="footer"
            class="dialog-footer">
        <el-button type="primary"
                   @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 回复：对话框 -->
    <el-dialog title="修改信息"
               :visible.sync="updateVisible"
               width="60%">
      <!-- 使用子组件 -->
      <suggestupdate :suggest="currentSuggest"
                     v-if="refresh"
                     @closedialog="updateData"></suggestupdate>
    </el-dialog>
  </div>
</template>

<script>
// 导入子组件
import suggestdetail from './Suggest/suggestdetail';
import suggestupdate from './Suggest/suggestupdate';

//导入axios
import axios from '../../axios_config'
import http from '../../axios_config'
import Commons from '../../js/commons'

export default {
  data () {
    return {
      tableData: [],           //表格数据
      currentSuggest: {},      //指向当前被选中的suggest信息
      dialogVisible: false,    //查看对话框是否显示
      updateVisible: false,    //更新对话框是否显示
      refresh: true,           //强制刷新子组件
      currentPage: 1,          //当前页
      total: 0,                //总条数
      totalPage: 0,            //总页数
      size: 10,                //每一页大小
      inputName: "",           //搜索栏内容
      replyContent: "",         //批量回复内容
      multipleSelection: [],   //每一行数据的选择框
      count: 0,                  //用于技术弹窗次数,为0才弹出
    }
  },
  methods: {
    //查看
    show (row) {
      //查看当前被选中的suggest
      this.currentSuggest = row;
      //显示对话框
      this.dialogVisible = true;
    },
    //回复
    update (row) {
      //强制刷新
      this.refresh = false;
      this.$nextTick(() => {
        this.refresh = true;
      });
      //回复当前被选中suggest
      this.currentSuggest = row;
      //显示对话框
      this.updateVisible = true;
    },
    //回复后更新数据
    //从suggestupdate子组件中传来的数据
    updateData (data) {
      console.log(data);
      //关闭对话框
      this.updateVisible = false;
      //更新数据
      if (data.result) {
        //数据更新了 将新数据展示在对应位置上
        for (let i = 0; i < this.tableData.length; i++) {
          let suggest = this.tableData[i];
          if (suggest.id == data.data.id) {
            console.log(suggest.id);
            //直接赋值 页面才会更新
            suggest.reply = data.data.reply;
            suggest.replyTime = data.data.replyTime;
            suggest.result = data.data.result;
            //封装数据
            let params = new URLSearchParams();
            params.append("id", suggest.id);
            params.append("reply", suggest.reply);
            //发送请求修改后台数据
            axios.post("http://192.168.11.18:8080/suggest/reply", params)
              .then(res => {
              });
            break;
          }
        }
      }
    },

    //批量回复
    replyBatch () {
      this.$confirm('您确定要进行批量回复吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (this.multipleSelection.length != 0) {
          //后台修改  
          for (let j = 0; j < this.multipleSelection.length; j++) {
            let suggest = this.tableData[j];
            //数据库中的真正的建议id
            let id = this.multipleSelection[j].id;
            //封装数据
            let params = new URLSearchParams();
            params.append("id", id);
            params.append("reply", this.replyContent);
            //发送请求修改后台数据
            axios.post("http://192.168.11.18:8080/suggest/reply", params)
              .then(res => {
                console.log(res);
                if (res.data.state == "SUCCESS") {
                  //直接赋值 页面才会更新
                  suggest.reply = this.replyContent;
                  //获取当前回复时间
                  let date = new Date();
                  let seperator1 = "-";
                  let seperator2 = ":";
                  let month = date.getMonth() + 1;
                  let strDate = date.getDate();
                  let hours = date.getHours();
                  let minutes = date.getMinutes();
                  let seconds = date.getSeconds();
                  if (month >= 1 && month <= 9) {
                    month = "0" + month;
                  }
                  if (strDate >= 0 && strDate <= 9) {
                    strDate = "0" + strDate;
                  }
                  if (hours >= 0 && hours <= 9) {
                    hours = "0" + hours;
                  }
                  if (minutes >= 0 && minutes <= 9) {
                    minutes = "0" + minutes;
                  }
                  if (seconds >= 0 && seconds <= 9) {
                    seconds = "0" + seconds;
                  }

                  let currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
                    + " " + hours + seperator2 + minutes + seperator2 + seconds;

                  //修改回复时间与是否处理
                  suggest.replyTime = currentdate;
                  suggest.result = '已处理';
                  //弹窗表示回复成功
                  if (count == 0) {
                    this.$message({
                      type: 'success',
                      message: res.data.message
                    });
                    this.count += 1;
                  }
                } else {
                  if (count == 0) {
                    //弹窗表示回复失败,稍后重试
                    this.$message({
                      type: 'danger',
                      message: res.data.message
                    });
                    this.count += 1;
                  }
                }
              });
          }
          //还原计数器
          count = 0;
        } else {
          this.$message.error('请先至少选择一项');
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消回复'
        });
      });
    },

    //删除单行
    del (index, row) {
      this.$confirm('您确定要删除该条记录？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
        //从表格中删除当行数据
        this.tableData.splice(index, 1);
        //row.id 才是数据库中的id
        axios.get("http://192.168.11.18:8080/suggest/del?id=" + row.id)
          .then(res => {

          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    //多选框将选中数据赋给全局变量
    handleSelectionChange (val) {
      this.multipleSelection = val;
    },

    // 是否可选
    canSelect (row) {
      if (row.result == '未处理') {
        return true;
      } else {
        return false;
      }
    },


    //模糊查询
    search (inputName) {
      this.inputName = inputName;
      this.currentPage = 1;
      this.findByPage();
    },

    //根据页码查询当前页数据
    findByPage () {
      http.get("http://192.168.11.18:8080/suggest/findAll?current=" + this.currentPage + "&size=" + this.size + "&content=" + this.inputName)
        .then(res => {
          console.log(res.data.data);
          this.tableData = res.data.data.data;
          //分页数据
          this.total = res.data.data.total;
          this.totalPage = res.data.data.totalPage;
          this.currentPage = res.data.data.currentPage;
          this.size = res.data.data.pageSize;
        });
    },

    //修改每一页大小
    handleSizeChange (size) {
      console.log("选择" + size);
      this.size = size;
      //发送请求获取当前页数据    page    size
      this.findByPage();
    },

    //选择第几页
    handleCurrentChange (page) {
      console.log("选择:" + page + "页");
      this.currentPage = page;
      //发送请求获取当前页数据    page    size
      this.findByPage();
    },
  },
  // 注册子组件
  components: {
    suggestdetail,
    suggestupdate
  },
  //当前组件创建完毕时
  mounted () {
    //调用方法获取第一页数据
    this.findByPage();
  }
}
</script>

<style scoped>
#suggestTitle {
  margin-left: 10px;
  font-size: 20px;
}
</style>